<template>
  <CommonPage :show-header="false">
    <article class="margin-top-sm flex  flex-column flex-sub">
      <section style="display: flex;justify-content: space-between;margin-bottom: 10px">
        <div style="display: flex">
          <HospitalPropertySelect v-model:value="andParams.property" @on-select="search"></HospitalPropertySelect>
          <HospitalTypeSelect v-model:value="andParams.type" @on-select="search"></HospitalTypeSelect>
          <HospitalLevelSelect v-model:value="andParams.level" @on-select="search"></HospitalLevelSelect>
          <SortSelect3 v-model:value="sortKey" @on-select="search"></SortSelect3>
        </div>
        <div style="display: flex">
          <n-button size="large" round type="success" style="font-size: 22px;margin: 0 10px" @click="handleCreate">添加
          </n-button>
          <SearchInput v-model:value="searchKey" @change="search" placeholder="ID/名称" :loading="loading"></SearchInput>
        </div>
      </section>
      <section  style="overflow:hidden" class="flex flex-sub radius-lg bg-white  padding-tb-sm">
            <CurdTable ref="tableRef"
                       :get-data="api.hospital.list"
                       :columns="columns"
                       :and-params="andParams"
                       :or-params="orParams"
                       :order-params="orderParams">
            </CurdTable>
      </section>
    </article>
  </CommonPage>
  <InvitationModal v-model:show="modalShow" :mode="modalMode" @onConfirm="confirm"></InvitationModal>
</template>

<script setup lang="ts">
import CommonPage from "@/components/page/CommonPage.vue";
import CurdTable from "@/components/common/table/CurdTable.vue";
import {h, onMounted, ref} from "vue";
import api from '@/api'
import SortSelect3 from "@/components/example/select/SortSelect3.vue";
import SearchInput from "@/components/common/input/SearchInput.vue";
import {NAvatar, NButton, NEllipsis, NText} from "naive-ui";
import InvitationModal from "@/components/example/modal/InvitationModal.vue";
import {useClipboard} from "@vueuse/core";
import router from "@/router";
import {imagePathPrefix} from '~/settings'
import {checkURL} from "@/utils/common/util";
import HospitalTypeSelect from "@/components/example/select/HospitalTypeSelect.vue";
import HospitalLevelSelect from "@/components/example/select/HospitalLevelSelect.vue";
import HospitalPropertySelect from "@/components/example/select/HospitalPropertySelect.vue";
const {copy} = useClipboard()

/** QueryBar筛选参数（可选） */
const orParams = ref({
  id: '',
  hospital: '',
})
/** 补充参数（可选） */
const andParams = ref({
  property:'',
  type: '',
  level:'',
})
/** 排序参数(可选）*/
const orderParams = ref({
  createTime: '',
})
const loading = ref()
const tableRef = ref()
const searchKey = ref('')
const sortKey = ref('')
const modalMode = ref()
const modalShow = ref(false)
const columns = ref([
  {title: 'ID', key: 'id', width: 6, ellipsis: {tooltip: true}},
  {
    title: '图标', key: 'avatarUrl', width: 8, ellipsis: {tooltip: true},align: 'center',
    render(row: any) {
      return h(NAvatar, {
        size:60,
        src: checkURL(row.logo)&&row.logo|| imagePathPrefix+row.logo,
        round: true
      })
    }
  },
  {
    title: '名称', key: 'hospital', width: 10, ellipsis: {tooltip: true}, align: 'center',
    render(row: any) {
      return h(NText, {style: {fontSize: '14px'}}, {default: () => row.hospital})
    }
  },
  {
    title: '地址', key: 'address', width: 10, ellipsis: {tooltip: true}, align: 'center',
    render(row: any) {
      return h(NText, {style: {fontSize: '14px'}}, {default: () => row.address})
    }
  },
  {
    title: '性质', key: 'property', width: 10, ellipsis: {tooltip: true}, align: 'center',
    render(row: any) {
      return h(NText, {style: {fontSize: '14px'}}, {default: () => row.property})
    }
  },
  {
    title: '类别', key: 'type', width: 10, ellipsis: {tooltip: true}, align: 'center',
    render(row: any) {
      return h(NText, {style: {fontSize: '14px'}}, {default: () => row.type})
    }
  },
  {
    title: '等级', key: 'level', width: 10, ellipsis: {tooltip: true}, align: 'center',
    render(row: any) {
      return h(NText, {style: {fontSize: '14px'}}, {default: () => row.level})
    }
  },
  {
    title: '规模', key: 'scale', width: 10, ellipsis: {tooltip: true}, align: 'center',
    render(row: any) {
      return h(NText, {style: {fontSize: '14px'}}, {default: () => row.scale})
    }
  },
  {
    title: '创建时间', key: 'createTime', width: 10, ellipsis: {tooltip: true}, align: 'center',
    render(row: any) {
      return h(NText, {style: {fontSize: '14px'}}, {default: () => row.establishYear})
    }
  },
  {
    title: '操作', key: 'actions', width: 8, align: 'center',
    render(row: any) {
      return [
        h(NButton, {
          round: true,
          size: 'small',
          secondary: true,
          type: "warning",
          onClick: () => handleUpdate(row)
        }, {default: () => "修改"}),
        h(NButton, {
          round: true,
          size: 'small',
          secondary: true,
          type: "error",
          onClick: () => handleDelete(row)
        }, {default: () => "删除"}),]
    }
  }
])

onMounted(() => {
  search()
})

const search = async () => {
  loading.value = true
  Object.keys(orParams.value).forEach((key: any) => {
    //@ts-ignore
      orParams.value[key] = `%${searchKey.value}%`
  })
  if (sortKey.value === '1') {
    orderParams.value.createTime = '1'
  } else if (sortKey.value === '2') {
    orderParams.value.createTime = '2'
  } else {
    orderParams.value.createTime = ''
  }
  await tableRef.value.handleSearch()
  loading.value = false
}

const confirm = () => {
  search()
}
const handleCreate = () => {
  router.push({
    path: '/hospital/edit',
  })
}
const handleUpdate = (item: any) => {
  router.push({
    path: '/hospital/edit',
    query: {
      hospitalInfo: encodeURIComponent(JSON.stringify(item))
    }
  })
}
const handleDelete = (row: any) => {
  window.$dialog.info({
    title: '确定要删除此医院信息？',
    positiveText: '确定',
    negativeText: '取消',
    onPositiveClick: () => {
      api.hospital.removeById({
        id:row.id
      }).then(res => {
        if (res && res.data.code === 0) {
          window.$message.success(res.data.msg)
        }
      })
    }
  })
}
const handleCopy = (row: any) => {
  copy(row.code)
  window.$message.success("复制成功")
}
const getStatusText = (value: number) => {
  if (value === 0) {
    return "未使用"
  } else if (value === 1) {
    return "已使用"
  } else if (value === 2) {
    return "已失效"
  }
}
const getStatusColor = (value: number) => {
  if (value === 0) {
    return "green"
  } else if (value === 1) {
    return "orange"
  } else if (value === 2) {
    return "red"
  }
}

</script>

<style scoped>

</style>